<template>
    <div class="detail">
        <div class='top'>
            <h3 v-if="detail.out_status == 3">请审核退货信息</h3>
            <h3 v-if="detail.out_status == 1">审核通过，请等待买家发货</h3>
            <h3 v-if="detail.out_status == 2">审核不通过,原因：{{ detail.reason }}</h3>
            <h3 v-if="detail.out_status == 4">买家已发货</h3>
            <h3 v-if="detail.out_status == 5">退货已完成</h3>
        </div>
        <div class="address" v-if="detail.out_status == 1 || detail.out_status == 4 || detail.out_status == 5">
            <van-cell :title="detail.addressname" :value="detail.mobile" :label="detail.province+detail.city+detail.district+detail.address" />
        </div>
        <van-card 
            :price="detail.pice" 
            :title="detail.title"
            :desc="detail.name" 
            :thumb="detail.url" 
            :num="detail.out_num"
        >
        </van-card>
        <div class="item">
            <van-cell title="退款总金额:" :value="'￥' + (detail.pice * detail.out_num)" />
        </div>

        <div class="item">
            <h5>上传图片(最多三张)</h5>
            <div class="img-wrapper">
               <van-image @click="bigImgShow(item)" v-for="item in detail.imgArr" width="100" height="100" fit='scale-down' :src="item.url" :key="item.id" />
            </div>
        </div>
        <van-image-preview v-model="imgshow" :images="images"></van-image-preview>
        <div class="item" v-if="detail.out_status == 3">
            <div class="form">
                <span>退货地址</span>
                <select name="" id="" v-model="address">
                    <option value="">审核通过请点击选择收货地址</option>
                    <option
                    v-for="item of addressList"
                    :key="item.id"
                    :value="item.id"
                    >
                    {{ item.province }}{{ item.city }}{{ item.district }}{{ item.address }}
                    </option>
                </select>
            </div>
        </div>
        <div class="item" v-if="detail.out_status == 3">
            <van-field v-model="reason" label="审核原因" placeholder="请输入审核原因" />
        </div>
        <div class="btn" v-if="detail.out_status == 3">
            <van-button :loading='loading' type="warning" size="normal" @click="submit(2)">拒绝</van-button>
            <van-button :loading='loading' type="danger" size="normal" @click="submit(1)">同意</van-button>
        </div>
        <div class="btn_confirm" v-if="detail.out_status == 4">
            <van-button :loading='loading' type="danger" size="large" @click="confirm">确认收货</van-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            loading:false,
            detail: {},
            imgArr: [],
            logis: '',
            reason: '',//原因
            address: '',//地址
            addressList: [],//地址列表
            imgshow:false,//大图弹窗
            images:[],//大图
        }
    },
    computed: {
        ...mapState(['openid', 'userState']),
        imgArrId() {
            let arr = this.imgArr.map(item => {
                return item.id
            })
            return arr.toString()
        }
    },
    mounted(){
        this._get()
    },
    methods:{
        //点击查看大图
        bigImgShow(e){
            
            this.images = []
            this.images = [e.url]
            console.log('查看大图',this.images)
            this.imgshow = true
        },
        //审核状态
        submit(e){
            this.$dialog.confirm({
                title: '提示',
                message: '确认变更状态吗？',
            })
            .then(() => {
                if (e == 2) {
                    if (!this.reason) {
                        this.$toast('请填写拒绝原因')
                        return
                    }
                } else {
                    if (!this.address) {
                        this.$toast('请选择退货地址')
                        return
                    }
                }
                this._submit(e)
            })
            .catch(() => {
                // on cancel
            });
        },
        async _submit(e){
            let form = {
                out_status: e,
                reason: this.reason,
                address_id: this.address,
                order: this.$route.params.id,
                id: this.detail.id,
                openid: this.openid
            }
            this.loading = true
            let { data: { code, data } } = await this.$http.post(this.$api.merchantTrial,form)
            this.loading = false
            if (code === 0) {
                this.$toast(data)
                setTimeout(() => {
                    this.$router.go(-1)
                }, 1500)
            }
        },
        //获取列表
        async _get() {
            let form = {
                order: this.$route.params.id,
                id: this.$route.params.mid,
                openid: this.openid
            }
            let { data: { code, data } } = await this.$http.get(this.$api.merchantOutdetails,form)
            if(code === 0) {
                data.items[0].imgArr = data.pic.map((item) => {
                    return item[0]
                })
                this.detail = data.items[0]
                // this.reason = this.detail.out_reason
                // this.num = this.detail.out_num
                // this.imgArr = this.detail.imgArr
                if(this.detail.num) {
                    this.getLogistics(this.detail.com, this.detail.num)
                }
                if(this.detail.out_status == 3) {
                    this._getAddressList()
                }
                console.log('detail---------------',this.detail)
            }
        },
        async getLogistics(com, num) {
            let form = {
                com,
                num
            }
            let { data: { code, data } } = await this.$http.get(this.$api.platformExpre,form)
            if(code === 0) {
                if (Array.isArray(data)) {
                    let logisArr = data[0].data.map(item => {
                        item.day = item.time.substring(5, 10)
                        item.time = item.time.substring(11, 16)
                        return item
                    })
                    this.logis = {
                        com: data[0].com,
                        num: data[0].nu,
                        logisArr
                    }
                } else {
                    this.logis = data
                }
            }
        },
        //获取地址列表
        async _getAddressList() {
            let { data: { code, data } } = await this.$http.post(this.$api.addressList,{
                size: 1000,
                current: 1,
                openid: this.openid
            })
            if(code === 0) {
                this.addressList = data.items
            }
        },
        //确认收货
        confirm() {
            this.$dialog.confirm({
                title: '提示',
                message: '是否确认收货？',
            })
            .then(() => {
                this._confirm()
            })
            .catch(() => {
                // on cancel
            });
        },
        async _confirm(){
            let form = {
                order: this.$route.params.id,
                id: this.detail.id,
                openid: this.openid
            }
            this.loading = true
            let { data: { code, data } } = await this.$http.post(this.$api.merchantOutconfirm,form)
            this.loading = false
            if (code === 0) {
                this._refund(data.openid)
            }
        },
        async _refund(openid) {
            let formData = new FormData()
            formData.append('totalFee', this.detail.subtotal)
            formData.append('out_num', this.detail.out_num)
            formData.append('orderNo', this.$route.params.id)
            formData.append('orderid', this.detail.mout_id)
            formData.append('openid', openid)
            let { data: { code, data } } = await this.$http.post(this.$api.outRefund,formData)
            if(code === 0) {
                this.$toast(data)
                setTimeout(() => {
                    this.$router.go(-1)
                }, 1500)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .detail{
        .top {
            text-align: center;
            margin-bottom: 1rem;
            padding: 2.5rem 0;
            background: orange;
            color: #fff;
            h3 {
                font-size: 18px;
            }
            h5 {
                font-size: 16px;
            }
        }
        .item{
           border-top: 1px solid #f0f0f0;
           background-color: #fff;
           h5{
               font-size: 14px;
               padding: 1rem;
           }
           .img-wrapper{
               padding: 1rem;
               .van-image{
                   border: 1px solid #f0f0f0;
               }
           }
           .form{
                display: flex;
                padding: 1rem;
                background: #fff;
                font-size: 14px;
                span{
                    display: block;
                    flex: 0 0 10rem;
                    width: 2rem;
                    margin-right: .4rem;
                }
                select{
                    padding: 0;
                    background: #fff;
                    border: 0;
                }
                input,select{
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    display: block;
                    font-size: 14px;
                }
           }
        }
        .btn_confirm,.btn{
            margin: 2rem 0;
        }
        .btn{
            display: flex;
            justify-content: space-between;
        }
    }
</style>